<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- <div slot="header" class="clearfix">
        <span style="font-weight: 700">群组列表</span>
      </div> -->
      <el-col :span="22" :offset="1">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-select v-model="owned" size="medium" @change="fetchData">
              <el-option
                v-for="item in groupOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-input
              v-model="search"
              placeholder="按名称筛选"
              suffix-icon="el-icon-search"
              size="medium"
              @keyup.enter.native="fetchData"
            />
          </el-col>
          <el-col :span="6" :offset="10">
            <div style="float:right">
              <el-button type="primary" size="medium" @click="outerVisible = true">新建群组</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-table v-loading="loading" :data="groupList" style="width: 100%">
            <el-table-column>
              <template slot-scope="{row}">
                <i class="el-icon-s-flag" />
                <span class="cursor" @click="groupDetail(row.id)">
                  <strong>{{ row.name }}</strong>
                </span>
                <el-tag
                  size="small"
                  :type="row.visibility | filterVisibilityType"
                >{{ row.visibility | filterVisibility }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="{row}">
                <el-button-group class="action">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    @click="editGroup(row.id)"
                  />
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="deleteGroup(row.id)"
                  />
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>

      <el-dialog title="新建群组" :visible.sync="outerVisible">
        <div>
          <el-form ref="addForm" :rules="rules" label-position="top" :model="addForm">
            <el-form-item label="群组名称" prop="name">
              <el-input v-model="addForm.name" />
            </el-form-item>
            <el-form-item label="群组URL" prop="path">
              <el-input v-model="addForm.path">
                <template slot="prepend">{{ gitServer }}</template>
              </el-input>
            </el-form-item>
            <el-form-item label="群组描述" prop="desc">
              <el-input v-model="addForm.desc" type="textarea" rows="4" />
            </el-form-item>
            <el-form-item label="可见性级别" prop="visibility">
              <el-radio-group v-model="addForm.visibility">
                <el-tooltip class="item" effect="dark" content="该群组和其项目只有其成员能以看到。" placement="top">
                  <el-radio label="private">私有</el-radio>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="该群组和其内部项目只有已登录用户能看到"
                  placement="top"
                >
                  <el-radio label="internal">内部</el-radio>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="该群组和其公开项目可以被任何授权的用户看到。"
                  placement="top"
                >
                  <el-radio label="public">公开</el-radio>
                </el-tooltip>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="success" @click="createGroup">创建群组</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getData, postData } from '@/api/requestData';

export default {
  components: {},
  filters: {
    filterVisibility(type) {
      const visMap = {
        private: '私有',
        public: '公开',
        internal: '内部'
      };
      return visMap[type];
    },
    filterVisibilityType(type) {
      const typeMap = {
        private: 'danger',
        public: 'success',
        internal: 'warning'
      };
      return typeMap[type];
    }
  },
  data() {
    return {
      loading: true,
      owned: true,
      groupList: [],
      search: '',
      groupOption: [
        { label: '个人群组', value: true },
        { label: '公开群组', value: false }
      ],
      outerVisible: false, // dialog是否展示
      addForm: {
        name: '',
        path: '',
        desc: '',
        visibility: 'internal'
      },
      rules: {
        name: [
          { required: true, message: '群组名称不能为空', trigger: 'blur' }
        ],
        path: [{ required: true, message: '群组url不能为空', trigger: 'blur' }]
      },
      gitServer: ''
    };
  },
  watch: {
    'addForm.name': function(val) {
      this.addForm.path = val;
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const params = {
        owned: this.owned,
        search: this.search
      };
      getData('/git/public/group/list', params).then((res) => {
        this.loading = true;
        this.groupList = res.data.list;
        this.gitServer = res.data.gitServer;
        this.loading = false;
      });
    },
    createGroup() {
      postData('/git/create/group', this.addForm).then((res) => {
        this.outerVisible = false;
        this.$message.success(res.message);
        this.fetchData();
      });
    },
    deleteGroup(groupId) {
      this.$confirm('删除群组将删除所有子组且无法恢复,确认删除?', '提示', {
        type: 'warning'
      })
        .then(() => {
          getData('/git/delete/group/' + groupId).then((res) => {
            this.$message.success(res.message);
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message.info('取消删除');
        });
    },
    editGroup(groupId) {
      this.$router.push({ path: '/git/group/edit/' + groupId });
    },
    groupDetail(groupId) {
      this.$router.push({ path: '/git/group/detail/' + groupId });
    }
  }
};
</script>

<style>
.cursor:hover {
  cursor: pointer;
}
</style>
<style scoped>
.action {
  float: right;
}
</style>
